<template>
  <zm-view ref="view">
    <zm-list :options="options" @query="handleQuery">
      <coupon v-for="(item, index) in list" :key="index" :info="item" show-type="detail" custom-class="mx-24 mt-20" disabled :show-tag="false" :show-expire="false" @click="onClickCoupon">
        <view v-if="stateText(item)" class="status-tag">
          <image class="status-bg" :src="useImage('/zuimei-film-oss/1.0.0/images/grey-badge.png')" mode="scaleToFill" />
          <text class="status-text">{{ stateText(item) }}</text>
        </view>
      </coupon>
    </zm-list>
  </zm-view>
</template>
<script>
import page from "@/mixins/page"
import { useImage } from "@/utils/hook"
export default {
  mixins: [page],
  data() {
    return {
      list: [],
      total: 0,
      options: {
        size: 15,
        emptyText: "暂无不可用优惠券",
        emptyImage: useImage("/zuimei-film-oss/1.0.0/empty/zwyhj-empty.png")
      }
    }
  },
  computed: {
    stateText() {
      return (data) => {
        if (data.isUse == 1) {
          return "已使用"
        } else if (data.isVoid == 1) {
          return "已作废"
        } else if (data.isFrozen == 1) {
          return "已冻结"
        } else if (data.isOver == 1) {
          return "已过期"
        } else {
          return ""
        }
      }
    }
  },
  methods: {
    onClickCoupon(data) {
      this.toView({
        url: "pages/person/coupon-info/coupon-info",
        params: {
          couponId: data.couponId
        }
      })
    },
    async handleQuery({ type, page, pageSize, fail, success }) {
      try {
        const res = await uni.$api.coupon.getCouponList({ page, pageSize, invalid: "2" })
        this.list = type == "load" ? [...this.list, ...res.list] : res.list
        this.total = res.count
        success({ list: res.list, total: res.count })
      } catch (e) {
        fail()
      }
    }
  }
}
</script>
<style scoped lang="scss">
.status-tag {
  top: -60rpx;
  right: 90rpx;
  width: 183rpx;
  height: 183rpx;
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  .status-bg {
    top: 0;
    left: 0;
    width: 183rpx;
    height: 183rpx;
    position: absolute;
  }
  .status-text {
    color: #999;
    font-size: 28rpx;
    transform: rotate(20deg);
  }
}
</style>
